<template>
	<view class="cell">
		<van-cell-group>
			<van-cell value="" >
			  <view slot="title" class="inline">
			    <view class="van-cell-text">进出安全范围通知</view>
			  </view>
			  <view slot="right-icon">
				  <van-switch :checked="safeRange" @change="(e) => safeRange = e.detail" size="small" active-color="#2BC888" />
			  </view>
			</van-cell>
			<van-cell value="" >
			  <view slot="title" class="inline">
			    <view class="van-cell-text">敏感词通知</view>
			  </view>
			  <view slot="right-icon">
				  <van-switch :checked="words" @change="(e) => words = e.detail" size="small" active-color="#2BC888" />
			  </view>
			</van-cell>
			<van-cell value="" >
			  <view slot="title" class="inline">
			    <view class="van-cell-text">黑名单网站通知</view>
			  </view>
			  <view slot="right-icon">
				  <van-switch :checked="blackSite" @change="(e) => blackSite = e.detail" size="small" active-color="#2BC888" />
			  </view>
			</van-cell>
			<van-cell value="" >
			  <view slot="title" class="inline">
			    <view class="van-cell-text">黑名单APP通知</view>
			  </view>
			  <view slot="right-icon">
				  <view>
					    <van-switch :checked="blacklist" @change="(e) => blacklist = e.detail" size="small" active-color="#2BC888" />
				  </view>
			  </view>
			</van-cell>
		</van-cell-group>
	</view>
</template>

<script lang="ts" setup>
	import {ref} from 'vue'
	const safeRange = ref(true)
	const words = ref(true)
	const blackSite = ref(true)
	const blacklist = ref(true)

	const onChange = (detail: boolean, key) => {
		key.value = detail
	}
</script>

<style>
</style>